<template>
  <div class="display">
    <div class="top">
      <div class="top-right">{{ title }}</div>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
// 定义props
const props = defineProps({
  title: {
    type: String,
    default: '内容与显示'
  }
});
</script>

<style lang="less" scoped>
.display {
  height: auto;
  background: var(--el-bg-color-overlay);
  border: 1px solid var(--el-border-color);

  .top {
    height: 32px;
    background-color: var(--el-fill-color-light);
    border-bottom: 1px solid var(--el-border-color-light);

    .top-right {
      height: 32px;
      width: fit-content;
      color: var(--el-text-color-primary);
      background-color: var(--el-bg-color-overlay);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 20px;
    }
  }

  .content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}
</style>